<template>
  <div class="container">
    <div class="header">
      <span class="back" @click="goBack"></span>
      <span class="title">订单签收</span>
    </div>
    <div class="subtitle">以下请手写签名</div>
    <canvas ref="canvas" class="sign-canvas" @touchstart="startDraw" @touchmove="draw" @touchend="endDraw"
      @mousedown="startDraw" @mousemove="draw" @mouseup="endDraw"></canvas>
    <input v-model="name" class="input" placeholder="请输入姓名" />
    <div class="footer">
      <button class="btn" @click="goBack">取消</button>
      <button class="btn" @click="clearCanvas">清除</button>
      <button class="btn primary" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawing: false,
      name: ''
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  },
  methods: {
    goBack() { history.back(); },
    resizeCanvas() {
      const canvas = this.$refs.canvas;
      canvas.width = window.innerWidth * 0.9;
      canvas.height = 200;
      this.ctx = canvas.getContext('2d');
    },
    startDraw(e) {
      this.drawing = true;
      const pos = this.getPos(e);
      this.ctx.beginPath();
      this.ctx.moveTo(pos.x, pos.y);
    },
    draw(e) {
      if (!this.drawing) return;
      const pos = this.getPos(e);
      this.ctx.lineTo(pos.x, pos.y);
      this.ctx.stroke();
    },
    endDraw() {
      this.drawing = false;
    },
    getPos(e) {
      const rect = this.$refs.canvas.getBoundingClientRect();
      let x, y;
      if (e.touches) {
        x = e.touches[0].clientX - rect.left;
        y = e.touches[0].clientY - rect.top;
      } else {
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;
      }
      return { x, y };
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    },
    submit() {
      if (!this.name) return alert('请输入姓名');
      const dataUrl = this.$refs.canvas.toDataURL();
      // 上传dataUrl和this.name到服务器
      alert('签名已提交');
      // 返回或跳转
    }
  }
}
</script>

<style scoped>
.container { background: #f5f7fa; min-height: 100vh; }
.header { display: flex; align-items: center; padding: 16px; }
.back { width: 24px; height: 24px; background: #ccc; border-radius: 50%; margin-right: 8px; display: inline-block; }
.title { font-size: 20px; font-weight: bold; }
.subtitle { padding: 16px; font-size: 16px; }
.sign-canvas { display: block; margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: 8px; width: 90vw; height: 200px; }
.input { display: block; margin: 16px auto; width: 90vw; height: 40px; border-radius: 8px; border: 1px solid #eee; padding: 0 8px; font-size: 16px; }
.footer { display: flex; justify-content: space-between; padding: 16px; background: #fff; position: fixed; left: 0; right: 0; bottom: 0; }
.btn { flex: 1; margin: 0 8px; height: 44px; border-radius: 8px; border: none; font-size: 16px; }
.primary { background: #409eff; color: #fff; }
</style>